<link rel="import"
      href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

<polymer-element name="editable-color-picker" attributes="owner color">
  <template>
    <p>
    This is a <strong>{{owner}}</strong>'s editable-color-picker.
    He likes the color <b style="color: {{color}}">{{color}}</b>.
    </p>
    <button on-click="{{setFocus}}">Set focus to text input</button>
    <input id="nameInput" value="{{owner}}"
           placeholder="Your name here...">
  </template>
  <script>
    Polymer({
      color: "red",
      owner: "Daniel",
      setFocus: function() {
        this.$.nameInput.focus();
      }
    });
  </script>
</polymer-element>
